<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Adminox - Responsive Web App Kit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description">
	<meta content="Coderthemes" name="author">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- App favicon -->
	<link rel="shortcut icon" href="${ctx}/admin/images/favicon.ico">
	<!-- App css -->
	<link href="${ctx}/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/icons.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/metismenu.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/plugins/tagsinput/jquery.tagsinput.css" rel="stylesheet">
	<link href="${ctx}/admin/plugins/select2/css/select2.min.css?v=1.1.9" rel="stylesheet">
	<link href="${ctx}/admin/plugins/sweet-alert2/sweetalert2.min.css" rel="stylesheet" type="text/css">
	<link href="${ctx}/admin/css/style.css" rel="stylesheet" type="text/css">
    <link href="${ctx}/admin/plugins/webuploader/webuploader.css" rel="stylesheet" type="text/css" >
    <link href="${ctx}/admin/css/webuploader-demo.min.css" rel="stylesheet" type="text/css">
	<script src="${ctx}/admin/js/modernizr.min.js"></script>
	<style type="text/css">
		#tags_tagsinput {
			border: 1px solid #dadada;
		}

		#tags_addTag input {
			width: 100%;
		}

		#tags_addTag {
			margin-top: -5px;
		}

		.select2-container .select2-selection--multiple .select2-selection__choice {
			background-color: #1ab394;
			border: 1px solid #e3e3e3;
			border-radius: 1px;
			padding: 0 7px;
			color: white;
		}

		.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
			color: white;
		}
	</style>
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
	<#include "common/header.ftl">
	<!-- Top Bar End -->
	<!-- ========== Left Sidebar Start ========== -->
    <#include "common/menu.ftl">
	<!-- Left Sidebar End -->
	<!-- ============================================================== -->
	<!-- Start right Content here -->
	<!-- ============================================================== -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="page-title-box">
							<h4 class="page-title float-left">发布文章</h4>
							<ol class="breadcrumb float-right">
								<li class="breadcrumb-item"><a href="#">Adminox</a></li>
								<li class="breadcrumb-item"><a href="#">Forms</a></li>
								<li class="breadcrumb-item active">Wysiwig Editor</li>
							</ol>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- end row -->
				<div class="row">
					<div class="col-12">
						<div class="card-box">
							<h4 class="text-uppercase font-18">发布文章</h4>
							<div class="border m-b-30"></div>
							<form class="form-horizontal" role="form" method="get">
								<div class="form-group row">
									<div class="col-6">
										<input type="text" id="title" class="form-control" name="title" value=""
										       placeholder="在此输入标题">
									</div>

                                    <div class="col-6">
                                        <input type="text" id="title" class="form-control" name="title" value=""
                                               placeholder="在此输入作者">
                                    </div>
								</div>
								<div class="form-group row">
									<div class="col-6">
										<input type="text" class="form-control"
										       placeholder="请填写公众账号连接"
										       value=""/>
									</div>
									<div class="col-6">
										<select class="js-states form-control" id="category" multiple="multiple">
                                            <#-- <#list categoryList as category>
	                                             <option value="${category.id}">${category.title}</option>
                                             </#list>-->
										</select>
									</div>
								</div>
								<div class="form-group row">
									<textarea id="elm1" name="area"></textarea>
								</div>
							</form>
							<div class="pull-right m-t-15 m-r-15">
								<button type="button" id="push" class="btn btn-primary">提交</button>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<!-- End row -->
			</div>
			<!-- container -->
		</div>
		<!-- content -->
		<#include "common/footer.ftl"/>
	</div>
	<!-- ============================================================== -->
	<!-- End Right content here -->
	<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- jQuery  -->
<script src="${ctx}/admin/js/jquery.min.js"></script>
<script src="${ctx}/admin/js/tether.min.js"></script>
<!-- Tether for Bootstrap -->
<script src="${ctx}/admin/js/bootstrap.min.js"></script>
<script src="${ctx}/admin/js/metisMenu.min.js"></script>
<script src="${ctx}/admin/js/waves.js"></script>
<script src="${ctx}/admin/js/jquery.slimscroll.js"></script>
<!--Wysiwig js-->
<script src="${ctx}/admin/plugins/tinymce/tinymce.min.js"></script>
<script src="${ctx}/admin/plugins/select2/js/select2.min.js"></script>
<script src="${ctx}/admin/plugins/select2/js/i18n/zh-CN.js"></script>
<script src="${ctx}/admin/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<script src="${ctx}/admin/plugins/sweet-alert2/sweetalert2.min.js"></script>
<script src="${ctx}/admin/plugins/webuploader/webuploader.min.js"></script>
<!-- App js -->
<script src="${ctx}/admin/js/jquery.core.js"></script>
<script src="${ctx}/admin/js/jquery.app.js"></script>
<script type="text/javascript">
    var BASE_URL = '${ctx}/admin/attachment/upload';
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: BASE_URL + '/js/Uploader.swf',

        // 文件接收服务端。
        server: BASE_URL,

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        fileNumLimit: 1, //限制上传个数
        fileSingleSizeLimit: 2048000 //限制单个上传图片的大小
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ,res) {
		$("#filePath").val(file.name);
        $("#thumbnail").val(res.data.path);
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ,res) {
        alert("失败");
    });
	$(document).ready(function () {
		$('#tags').tagsInput({
			width: '100%',
			height: '38px',
			defaultText: '请输入文章标签'
		});
		//多选
		$("#category").select2({
			language: "zh-CN",
			tags: false,
			placeholder: '请输入文章分类'
		});

		tinymce.init({
			selector: "textarea#elm1",
			theme: "modern",
			height: 300,
			language: 'zh_CN',
			plugins: [
				"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
				"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
				"save table contextmenu directionality emoticons template paste textcolor"
			],
			toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
			style_formats: [
				{title: 'Bold text', inline: 'b'},
				{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
				{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
				{title: 'code',inline: 'code'},
			]
		});
		$("#push").click(function () {
			var text = tinyMCE.activeEditor.getContent();
			var title = $("#title").val();
			var category = [];
			var tags = $("#tags").val().split(",");
			var categoryArr = $("#category").select2("data");
            var thumbnail = $("#thumbnail").val();
			$(categoryArr).each(function (index, element) {
				category.push(element.id);
			})
			if (title == "") {
				sweetAlert("提示","请输入标题","warning");
				return;
			}
			$.ajax({
				url: '${ctx}/news/publish',
				//data: {'title': title, 'text': text, 'tags': tags, 'category': category,'thumbnail':thumbnail},
				data: {'title': title, 'text': text},
				dataType: 'json',
				type: 'post',
				traditional: true,
				success: function (data) {
					if (data.status == "200") {
						sweetAlert("提示","添加成功！","success");
					} else {
						sweetAlert("提示","添加失败","warning");
					}
				}
			})
		});
	});
</script>
</body>
</html>